A Scatter chart with the ability to add markers

You can click on the Scatter chart to add a red circle. When the circles are then clicked on nothing happens.

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.circle.js"></script>
<script src="RGraph.drawing.circle.js"></script>
<script src="RGraph.scatter.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="600" height="200">
    [No canvas support]
</canvas>

This is the code that generates the chart:

<script>
    over_circle = false;

    scatter = new RGraph.Scatter({
        id: 'cvs',
        data: [[15,91]],
        options: {
            gutterLeft: 25,
            xmax: 365,
            labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
        }
    }).draw();

    scatter.canvas.onmousemove = function (e)
    {
        var obj = RGraph.ObjectRegistry.getObjectByXY(e);
        
        if (obj && obj.type == 'drawing.circle') {
            over_circle = obj;
            e.target.style.cursor = 'pointer';
        } else {
            over_circle = false;
            e.target.style.cursor = 'default';
        }
    }

    scatter.canvas.onclick = function (e)
    {
        if (over_circle == false) {

            var obj = scatter;
            var xValue = obj.getXValue(e);
            var yValue = obj.getYValue(e);
            var xCoord = obj.getXCoord(xValue);
            var yCoord = obj.getYCoord(yValue);

            var circle = new RGraph.Drawing.Circle({id: 'cvs', x: xCoord, y: yCoord, radius: 15})
            
            circle.set({
                fillstyle: 'Gradient(white:rgba(255,128,128,0.75):rgba(255,0,0,0.5))',
                tooltips: ['A tooltip from the circle with UID: ' + circle.uid],
                shadow: true,
                shadowBlur:1,
                shadowOffsetx:2,
                shadowOffsety:2
            }).draw();
        }
    }
</script>